import {Button, Collapse} from 'antd'
import React, {useState, useEffect, memo} from 'react'
import moment from 'moment'
import styles from './index.less'
import {getCompany} from '@/service/system/company'
import {translateDataToTree} from '@/utils/common/index'
import {getOrderList} from '@/service/carMessage/list'
import {getList} from '@/service/order/index'

import CustomTable from '@/components/Table'
import SearchForm from '@/components/SearchForm'
import 'moment/locale/zh-cn'
import {downloadDocumentUrl} from '@/service/common/download'

const {Panel} = Collapse
const customizeHeader = (value: string) => (
	<div>
		<div className={styles.tip} />
		{value}
	</div>
)

const formItemLayout = {
	labelCol: {flex: '100px'},
	wrapperCol: {flex: '1'},
}

const Order = memo((props: any) => {
	const {vin, id} = props.data
	const [isparams, setIsParams] = useState({
		current: 1,
		size: 10,
	})
	const [searchIsData, setSearchIsData] = useState<any>({})
	const [formIsData, setFormIsData] = useState<any[]>([])

	// 列表
	const [loadingIs, setLoadingIs] = useState(false)
	const [isTotal, setIsTotal] = useState(0)
	const [tableIsList, setTableIsList] = useState<any[]>([])

	const [noparams, setNoParams] = useState({
		current: 1,
		size: 10,
	})
	const [searchNoData, setSearchNoData] = useState({})
	const [noTotal, setNoTotal] = useState(0)
	const [formNoData, setFormNoData] = useState<any[]>([])

	// 列表
	const [loadingNo, setLoadingNo] = useState(false)
	const [tableNoList, setTableNoList] = useState<any[]>([])

	const [orgSource, setOrgSource] = useState<any>([])
	const isColumns: any = [
		{
			title: '订单号',
			dataIndex: 'orderNo',
			align: 'center',
			width: 300,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '订单状态',
			dataIndex: 'orderStatusStr',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '订单创建时间',
			dataIndex: 'orderCreateTime',
			align: 'center',
			width: 240,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '实际发车时间',
			dataIndex: 'departureTime',
			align: 'center',
			width: 240,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '销售类型',
			dataIndex: 'violationExplain',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '司机渠道来源',
			dataIndex: 'driverSourceName',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '城市',
			dataIndex: 'cityName',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '所属公司',
			dataIndex: 'cityName',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},

		{
			title: '车牌号',
			dataIndex: 'carPlateNo',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '车架号',
			dataIndex: 'vin',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '车型',
			dataIndex: 'fashionName',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '司机姓名',
			dataIndex: 'driverName',
			align: 'center',
			width: 200,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '合同号',
			dataIndex: 'contractNo',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '司机激活状态',
			dataIndex: 'driverActiveStatusStr',
			align: 'center',
			width: 200,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '网签发起人',
			dataIndex: 'onlineIssuer',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '合同开始时间',
			dataIndex: 'contractStartTime',
			align: 'center',
			width: 240,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '合同结束时间',
			dataIndex: 'contractEndTime',
			align: 'center',
			width: 240,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '租期',
			dataIndex: 'lease',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '租金',
			dataIndex: 'reprises',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '服务费',
			dataIndex: 'serviceFee',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '押金',
			dataIndex: 'deposit',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
	]
	const noColumns: any = [
		{
			title: '订单号',
			dataIndex: 'orderCarNo',
			align: 'center',
			width: 200,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '订单状态',
			dataIndex: 'orderCarStatusname',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '订单创建时间',
			dataIndex: 'createTime',
			align: 'center',
			width: 200,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '实际发车时间',
			dataIndex: 'deliveryTime',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		// {
		// 	title: '销售类型',
		// 	dataIndex: 'carId',
		// 	align: 'center',
		// 	width: 200,
		// ellipsis: true,
		// 	render: (text: string) => <span>{text || '--'}</span>,
		// },
		{
			title: '司机渠道来源',
			dataIndex: 'vinsss',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '城市',
			dataIndex: 'orderCityName',
			align: 'center',
			width: 200,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '所属公司',
			dataIndex: 'lessorName',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '车牌号',
			dataIndex: 'plateNo',
			align: 'center',
			width: 200,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '车架号',
			dataIndex: 'vinNo',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '车型',
			dataIndex: 'applicableGoods',
			align: 'center',
			width: 200,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '司机姓名',
			dataIndex: 'driverName',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '合同号',
			dataIndex: 'contractNo',
			align: 'center',
			width: 200,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '合同审核状态',
			dataIndex: 'noStatus',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '司机激活状态',
			dataIndex: 'jh',
			align: 'center',
			width: 200,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '网签发起人',
			dataIndex: 'fqr',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '合同开始时间',
			dataIndex: 'htsj',
			align: 'center',
			width: 240,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '合同结束时间',
			dataIndex: 'htjssj',
			align: 'center',
			width: 240,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '租期',
			dataIndex: 'tenancy',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '租金',
			dataIndex: 'rent',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '服务费',
			dataIndex: 'fwf',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
		{
			title: '押金',
			dataIndex: 'sicherheit',
			align: 'center',
			width: 140,
			ellipsis: true,
			render: (text: string) => <span>{text || '--'}</span>,
		},
	]

	// 获取组织机构数据
	const onOrgFun = () => {
		getCompany({merchantId: props?.user?.orgId}).then((res: any) => {
			if (res?.success) {
				const list: any = translateDataToTree(res?.data)
				setOrgSource(list as any)
			}
		})
	}

	useEffect(() => {
		onOrgFun()
	}, [props?.user?.orgId])

	useEffect(() => {
		const formItems: any[] = [
			{
				type: 'group',
				key: 'group1',
				groupItems: [
					{
						type: 'dateRange',
						key: 'renewalDate',
						name: 'renewalDate',
						label: '订单创建时间',
					},
					{
						type: 'input',
						key: 'orderNo',
						name: 'orderNo',
						label: '订单号',
					},
					{
						type: 'treeSelect',
						label: '所属公司',
						name: 'companyId',
						key: 'companyId',
						keys: 'id',
						title: 'name',
						treeData: [...orgSource],
					},
					// {
					//   type: 'select',
					//   label: '司机渠道来源',
					//   name: 'driverSourceId',
					//   key: 'driverSourceId',
					//   keys: 'id',
					//   title: 'name',
					//   treeData: [...orgSource],
					// },
				],
			},
		]
		setFormIsData(formItems)
	}, [orgSource])

	useEffect(() => {
		const formItems: any[] = [
			{
				type: 'group',
				key: 'group1',
				groupItems: [
					{
						type: 'dateRange',
						key: 'time',
						name: 'time',
						label: '订单创建时间',
					},
					{
						type: 'input',
						key: 'orderCarNo',
						name: 'orderCarNo',
						label: '订单号',
					},
					{
						type: 'treeSelect',
						label: '所属公司',
						name: 'lessorId',
						key: 'lessorId',
						keys: 'id',
						title: 'name',
						treeData: [...orgSource],
					},
				],
			},
			// {
			// 	type: 'group',
			// 	key: 'group2',
			// 	groupItems: [
			// 		{
			// 			// type: 'treeSelect',
			// 			// label: '司机渠道来源',
			// 			// name: 'holderId',
			// 			// key: 'holderId',
			// 			// keys: 'id',
			// 			// title: 'name',
			// 			// treeData: [],
			// 		},
			// 		{},
			// 		{},
			// 	],
			// },
		]
		setFormNoData(formItems)
	}, [orgSource])

	// 获取车辆滴滴订单数据
	const onIsListFun = () => {
		setLoadingIs(true)
		getOrderList({
			pageNum: isparams?.current,
			pageSize: isparams?.size,
			...searchIsData,
			vin,
		})
			.then((res: any) => {
				if (res?.success) {
					setTableIsList(() => res.data)
					setIsTotal(res.page.total)
				}
				setLoadingIs(false)
			})
			.catch(() => {
				setLoadingIs(false)
			})
	}

	useEffect(() => {
		onIsListFun()
	}, [isparams, searchIsData])

	const onIsFinish = (values: any) => {
		let orderCreateTimeStart
		let orderCreateTimerEnd
		if (values.renewalDate) {
			orderCreateTimeStart = moment(values?.renewalDate[0]).format(
				'YYYY-MM-DD HH:mm:ss',
			)
			orderCreateTimerEnd = moment(values?.renewalDate[1]).format(
				'YYYY-MM-DD HH:mm:ss',
			)
		}
		const newData = {...values, orderCreateTimeStart, orderCreateTimerEnd}
		delete newData.renewalDate
		setSearchIsData(newData)
	}
	const onIsReset = () => {
		setSearchIsData({})
	}

	// 获取车辆非滴滴订单数据
	const onNoListFun = () => {
		setLoadingNo(true)
		getList({
			...noparams,
			carId: id,
			...searchNoData,
		})
			.then((res: any) => {
				if (res?.success) {
					setTableNoList(() => res?.data?.records)
					setNoTotal(res?.data?.total)
				}
				setLoadingNo(false)
			})
			.catch(() => {
				setLoadingNo(false)
			})
	}

	useEffect(() => {
		onNoListFun()
	}, [noparams, searchNoData])

	const onNoFinish = (values: any) => {
		const params = {
			createTimeStart: values?.time
				? moment(values?.time[0]).format('YYYY-MM-DD')
				: null,
			createTimeEnd: values?.time
				? moment(values?.time[1]).format('YYYY-MM-DD')
				: null,
		}
		setSearchNoData({...values, ...params})
	}
	const onNoReset = () => {
		setSearchNoData({})
	}
	return (
		<div className={styles.admittanceAdd}>
			<div className={`${styles.content} ${styles.formDetils}`}>
				<Collapse
					defaultActiveKey={['1', '2']}
					ghost
					expandIconPosition="end">
					<Panel header={customizeHeader('滴滴订单租赁信息')} key="1">
						<div className="search">
							<SearchForm
								onFinish={onIsFinish}
								onReset={onIsReset}
								formItems={formIsData}
								formLayout={formItemLayout}
							/>
						</div>
						<div className="btnlist">
							<Button
								ghost
								type="primary"
								size="small"
								onClick={() => {
									downloadDocumentUrl({
										resourceId: '119',
										queryDesc:
											'滴滴订单导出,resourceId:119',
										queryParam: {...searchIsData, vin},
									})
								}}>
								导出
							</Button>
						</div>
						<CustomTable
							params={isparams}
							columns={isColumns}
							total={isTotal}
							pagination
							callback={(pagination: any) => {
								setIsParams(pagination)
							}}
							loading={loadingIs}
							dataSource={tableIsList}
						/>
					</Panel>
					<Panel
						header={customizeHeader('非滴滴订单租赁信息')}
						key="2">
						<div className="search">
							<SearchForm
								onFinish={onNoFinish}
								onReset={onNoReset}
								formItems={formNoData}
								formLayout={formItemLayout}
							/>
						</div>
						<div className="btnlist">
							<Button
								ghost
								type="primary"
								size="small"
								onClick={() => {
									downloadDocumentUrl({
										resourceId: '182',
										queryDesc:
											'非滴滴订单租赁信息导出,resourceId:182',
										queryParam: {
											...searchNoData,
											carId: id,
										},
									})
								}}>
								导出
							</Button>
						</div>
						<CustomTable
							params={noparams}
							columns={noColumns}
							pagination
							total={noTotal}
							callback={(pagination: any) => {
								setNoParams(pagination)
							}}
							loading={loadingNo}
							dataSource={tableNoList}
						/>
					</Panel>
				</Collapse>
			</div>
		</div>
	)
})
export default Order
